<template>
    <div class="simple-menu-bar">
      <template v-for="(m, index) in menuList">
        <span :key="index" class="simple-menu" @click="selectMenu(m.id)">{{m.name}}</span>
      </template>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'SimpleTopMenu',
  computed: mapState({
    menuList: state => state.back.menuList
  }),
  methods: {
    selectMenu (id) {
      let tempMenu = this.menuList.find(item => item.id === id).children
      this.$emit('selectMenu', tempMenu || [])
    }
  }
}
</script>

<style lang="less" scoped>
.simple-menu-bar {
  width: auto;
  height: 100%;
  display: inline-block;
  float: left;
  .simple-menu {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 120px;
    margin: 0 20px 0 20px;
    height: calc(100% - 2px);
    line-height: 64px;
    cursor: pointer;
  }
}
</style>
